<div class="wsl-modal-header">
  <h4 class="wsl-modal-title">{{ content.title }}</h4>
</div>
<div class="wsl-modal-body">
  <app-alert [alert]="alert" *ngIf="alert" />
  <form
    class="wsl-form"
    [formGroup]="form"
    (ngSubmit)="content.onSubmit(form.value)"
    novalidate>
    <div *ngIf="content.mode === 'create'">
      <label class="wsl-input-label" for="wsl-name">Team Name</label>
      <input
        class="wsl-input-field"
        type="text"
        id="wsl-name"
        required
        autocomplete="off"
        aria-describedby="wsl-name-help"
        formControlName="name"
        name="name"
        wslAutofocus />
      <small
        id="wsl-name-help"
        [ngClass]="hints.get('name').type"
        [innerHTML]="hints.get('name').text"></small>
    </div>
    <div>
      <label class="wsl-input-label" for="wsl-slug">Team Slug</label>
      <input
        class="wsl-input-field"
        type="text"
        id="wsl-slug"
        required
        autocomplete="off"
        aria-describedby="wsl-slug-help"
        formControlName="slug"
        name="slug" />
      <small
        id="wsl-slug-help"
        [ngClass]="hints.get('slug').type"
        [innerHTML]="hints.get('slug').text"></small>
    </div>
    <div class="wsl-form-footer">
      <div class="wsl-form-submit">
        <button class="wsl-btn-lg wsl-btn-primary" type="submit">
          {{ content.buttonText }}
        </button>
      </div>
      <div class="wsl-form-links">
        <button
          class="wsl-btn-lg wsl-btn-secondary"
          type="button"
          (click)="toggleMode()">
          {{ content.linkText }}
        </button>
      </div>
    </div>
  </form>
</div>
